<template>
  <Spin :spinning="Spinning" wrapperClassName="spanclass">
    <div class="container">
      <div class="RightBox">
        <div class="FileNumBox">
          <div>
            <p>文件夹数量： {{ BagNum }}</p>
            <p>当前路径:</p>
            <!-- :class="CurrentPath === path.url?'path':''" -->
            <p
              style="cursor: pointer"
              v-for="(path, index) in UrlArr"
              :key="index"
              @click="GoPath(path, index)"
            >
              <span v-if="index !== 0"> > </span>
              <span>/</span>
              {{ path.name }}
            </p>
          </div>
          <div class="back" @click="GoBack" v-if="UrlArr.length > 1">
            返回上级目录
          </div>
        </div>
        <div class="FileItemBox">
          <ul class="FileUl">
            <li v-for="(item, index) in BagList" :key="index">
              <div
                class="FileItemMsg"
                :class="{
                  noclick:
                    (item.fileType === '1' && item.size === '0') ||
                    item.fileType === '2',
                }"
                @click="OpenBag(item)"
              >
                <img
                  class="FileItemImg"
                  :src="ReturnIcon(item.fileType, item.name)"
                  alt=""
                />
                <div>
                  <p style="margin-bottom: 5px; font-size: 16px">
                    {{ item.name }}
                  </p>
                  <p>
                    <span style="margin-right: 30px"
                      >文件数量：{{ item.size }}</span
                    >
                    <span>{{ item.date }}</span>
                  </p>
                </div>
              </div>
              <div class="FileItemHandle">
                <div class="DownloadBox">
                  <img
                    @click="DownLoadhandle(item)"
                    v-if="item.fileType === '2'"
                    class="Download"
                    src="~@/assets/images/MultimediaData/download.png"
                    alt=""
                  />
                </div>
                <div class="delBox">
                  <img
                    @click="DelHandle(item)"
                    v-if="item.fileType === '2'"
                    class="del"
                    src="~@/assets/images/MultimediaData/del.png"
                    alt=""
                  />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </Spin>
</template>
<script setup lang="tsx">
import { onMounted, ref, watch } from 'vue';
import audio1 from '@/assets/images/MultimediaData/audio1.png';
import audio2 from '@/assets/images/MultimediaData/audio2.png';
import bo2 from '@/assets/images/MultimediaData/bo2.png';
import chubo1 from '@/assets/images/MultimediaData/chubo1.png';
import shandian from '@/assets/images/MultimediaData/dian.png';
import filebag from '@/assets/images/MultimediaData/filebag.png';
import img1 from '@/assets/images/MultimediaData/img1.png';
import img2 from '@/assets/images/MultimediaData/img2.png';
import lianbo1 from '@/assets/images/MultimediaData/lianbo1.png';
import rizhi from '@/assets/images/MultimediaData/rizhi.png';
import video1 from '@/assets/images/MultimediaData/video1.png';
import video2 from '@/assets/images/MultimediaData/video2.png';
import wenben from '@/assets/images/MultimediaData/wenben.png';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { Modal, Spin, message } from 'ant-design-vue';
import { Bigdownload } from '@/utils/bigdownload';
import { reqMultimediaDataAll } from '@/api/device';

const Spinning = ref(false);
const props = defineProps({
  pageData: {
    type: Object,
  },
});
console.log('props值', props.pageData);

// 输出图标
const ReturnIcon = (fileType: any, name: any) => {
  console.log('fileType', fileType);
  console.log('name', name);
  if (fileType === '1') {
    return filebag;
  } else if (fileType === '2') {
    console.log('name', name);
    if (name.includes('.jpg')) {
      return img2;
    } else if (name.includes('.png')) {
      return img2;
    } else if (name.includes('.jpeg')) {
      return img2;
    } else if (name.includes('.mp4')) {
      return video2;
    } else if (name.includes('.wav')) {
      return audio2;
    } else if (name.includes('.mp3')) {
      return audio2;
    } else if (name.includes('.mseed')) {
      return bo2;
    } else if (name.includes('.txt')) {
      return wenben;
    } else {
      return wenben;
    }
  }
};

const BagList = ref([
  //   {
  //       id: '1',
  //       name: 'cs.5416541654',
  //       num: 5,
  //   },
  //   {
  //       id: '2',
  //       name: 'cs.56565656',
  //       num: 3,
  //   },
  //   {
  //       id: '3',
  //       name: 'cs.565650101',
  //       num: 7,
  //   },
  //   {
  //       id: '4',
  //       name: 'cs.856780110',
  //       num: 6,
  //   },
] as any);

const BagNum = ref(0);

// 请求查询文件夹
const reqMultimediaDataBag = async (data: any) => {
  BagNum.value = 0;
  Spinning.value = true;
  BagList.value = [] as any;
  const res: any = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    Spinning.value = false;
    // console.log('文件夹', res);
    BagList.value = res.data || [];
    // console.log(' BagList.value',  BagList.value);
    BagList.value.forEach((item: any) => {
      let arr = item.url.split('/');
      item.name = arr[arr.length - 1];
      if (item.fileType === '1') {
        BagNum.value = BagNum.value + 1;
      }
    });
  }
};

let ParamsObj = {
  code: props.pageData?.code,
  fileType: '5',
  mediaType: '1',
  operationType: '1',
  url: 'root',
};

onMounted(async () => {
  await reqMultimediaDataBag(ParamsObj);
});

const UrlArr = ref([
  {
    name: 'root',
  },
] as any);
//   打开文件夹
const OpenBag = async (val: any) => {
  UrlArr.value.push(val);
  await reqMultimediaDataBag({
    code: props.pageData?.code,
    fileType: val.fileType,
    mediaType: '1',
    operationType: '1',
    url: val.url,
  });
};

// 返回
const GoBack = async () => {
  if (UrlArr.value.length > 2) {
    UrlArr.value.pop();
    await reqMultimediaDataBag({
      code: props.pageData?.code,
      fileType: UrlArr.value[UrlArr.value.length - 1].fileType,
      mediaType: '1',
      operationType: '1',
      url: UrlArr.value[UrlArr.value.length - 1].url,
    });
  } else if (UrlArr.value.length === 2) {
    await reqMultimediaDataBag(ParamsObj);
    UrlArr.value.pop();
  }
};

const CurrentPath = ref('');
// 跳到指定位置
const GoPath = async (val: any, ind: any) => {
  if (val.name === 'root') {
    UrlArr.value = [
      {
        name: 'root',
      },
    ];
    CurrentPath.value = '';
    await reqMultimediaDataBag(ParamsObj);
  } else {
    UrlArr.value = UrlArr.value.slice(0, ind + 1);
    CurrentPath.value = val.url;
    await reqMultimediaDataBag({
      code: props.pageData?.code,
      fileType: val.fileType,
      mediaType: '1',
      operationType: '1',
      url: val.url,
    });
  }
};

// 请求删除文件
const getMultimediaDataDel = async (data: any) => {
  Spinning.value = true;
  const res = await reqMultimediaDataAll(data);
  if (res.code === 200) {
    Spinning.value = false;
    message.success('操作成功');
    await reqMultimediaDataBag(ParamsObj);
  }
};

// 删除
const DelHandle = async (val: any) => {
  console.log('删除val', val);
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认删除这条数据？`,
    onOk: async () => {
      const params = {
        code: props.pageData?.code,
        fileType: val.fileType,
        mediaType: '1',
        operationType: '2',
        url: val.url,
      };
      await getMultimediaDataDel(params);
    },
  });
};

// 下载
const DownLoadhandle = async (val: any) => {
  Bigdownload({
    code: props.pageData?.code,
    url: val.url,
  });
};
</script>
<style lang="scss" scoped>
.spanclass {
  width: 100%;
  height: 100%;
  :deep(.ant-spin-container) {
    width: 100%;
    height: 100%;
    // border: 1px solid pink;
  }
}
.container {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  display: flex;
  .RightBox {
    width: 100%;
    height: 100%;
    //   border-left: 1px solid #5B7893;
    .FileNumBox {
      width: 100%;
      height: 35px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .back {
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0 10px;
      }
      .path {
        color: #0081ff;
      }
      & > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      p {
        margin-right: 10px;
      }
    }
    .FileItemBox {
      width: 100%;
      height: calc(100% - 35px);
      // border: 1px solid red;
      // padding-left: 10px;
      overflow-y: auto;
      .FileUl {
        width: 100%;
        height: 100%;
        .noclick {
          pointer-events: none;
          // cursor: not-allowed;
          cursor: no-drop;
          // opacity: 0.3;
        }

        & > li {
          width: 100%;
          // height: 70px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.3);
          padding-top: 20px;
          padding-bottom: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // margin-bottom: 10px;
          .FileItemMsg {
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .FileItemImg {
              width: 38px;
              height: 38px;
              margin-right: 20px;
            }
          }
          .FileItemHandle {
            display: flex;
            .DownloadBox {
              opacity: 0.6;
              cursor: pointer;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 15px;
              // background-color: rgba(0,0,0,0.3);
              border-radius: 10px;
              &:hover {
                opacity: 1;
              }
              .Download {
                cursor: pointer;
                width: 30px;
                height: 30px;
                // border: 1px solid red;
              }
            }
            .delBox {
              opacity: 0.6;
              cursor: pointer;
              width: 40px;
              height: 40px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 15px;
              // background-color: rgba(0,0,0,0.3);
              border-radius: 10px;
              &:hover {
                opacity: 1;
              }
              .del {
                cursor: pointer;
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
